<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar class="bgf"
                 :title=" comment.reply_count ? comment.reply_count+'条回复':'暂无回复'  ">
      <van-icon slot="left"
                name="cross"
                @click="$emit('click-close')" />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <comment-item :comment-info="comment" />
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

    <!-- 评论的回复列表 -->
    <comment-list :list="commentReplyList"
                  type="c"
                  :source-id="comment.com_id" />
    <!-- /评论的回复列表 -->

    <!-- 评论回复弹框 -->
    <van-popup v-model="isCommentShow"
               position="bottom">
      <comment-post type="c"
                    v-if="isCommentShow"
                    @close="isCommentShow=false"
                    @updateTotal="comment.reply_count++"
                    :target="comment.com_id"
                    :list="commentReplyList" />
    </van-popup>
    <!-- /评论回复弹框 -->

    <!-- 底部 -->
    <div class="post-wrap">
      <van-button type="default"
                  size="small"
                  class="post-btn"
                  @click="isCommentShow=true">写评论</van-button>
    </div>
    <!-- /底部 -->
  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'
export default {
  name: 'CommentReply',
  components: { CommentItem, CommentList, CommentPost },
  props: {
    // 点击的那个文章评论
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      commentReplyList: [], // 评论回复列表
      isCommentShow: false // 评论回复是否显示
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
/deep/ .bgf{
  background-color: #fff!important;
  position: sticky;
  top:0;
  .van-nav-bar__title{
    color: unset;
  }
  .van-icon{
    color: unset!important;
  }
}
.post-wrap{
  position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.17333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 0.01333rem solid #d8d8d8;
    .post-btn{
      width: 60%;
    }

}
</style>
